<template>
  <div class="app-container">
    <el-row :gutter="20" class="c-flex c-hidden">
      <el-col :span="24" :xs="24" class="c-flex c-height c-dis-flex-col c-hidden">
        <el-form  :model="queryParam" ref="queryForm" :inline="true" label-width="84px" size="small">
          <el-form-item label="试卷类型：">
            <el-select v-model="queryParam.paperType" placeholder="试卷类型" clearable>
              <el-option
                v-for="dict in dict.type.exam_paper_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="试卷名称：">
            <el-input v-model="queryParam.name" placeholder="试卷名称" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="submitForm">查询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <router-link :to="{ path: '/practice/paper/edit' }" class="link-left">
              <el-button type="primary" plain icon="el-icon-plus" size="mini">新增</el-button>
            </router-link>
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="showDialog">自动组卷</el-button>
          </el-col>
        </el-row>

        <el-table  v-loading="listLoading" :data="tableData" border fit highlight-current-row style="width: 100%">
          <el-table-column type="index" label="序号" width="90px"/>
          <el-table-column prop="name" label="名称" align="center"  min-width="120px"/>
          <el-table-column label="试卷类型" align="center" prop="paperType" min-width="120px">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.exam_paper_type" :value="scope.row.paperType"/>
            </template>
          </el-table-column>
          <el-table-column prop="suggestTime" label="建议时长(分钟)" align="center"/>
          <el-table-column prop="scoreStr" label="总分"/>
          <el-table-column prop="passScoreStr" label="合格分数"/>
          <el-table-column prop="createTime" label="创建时间" width="160px"/>

          <el-table-column label="操作" align="center" width="160px">
            <template slot-scope="{ row }">
              <el-button
                size="mini"
                @click="
                  $router.push({
                    path: '/practice/paper/edit',
                    query: { id: row.id },
                  })
                "
              >编辑
              </el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="deletePaper(row)"
                class="link-left"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParam.pageNum"
          :limit.sync="queryParam.pageSize"
          @pagination="search"
        />
      </el-col>
    </el-row>

    <!-- 自动组卷弹出框 -->
    <el-dialog :visible.sync="questionPage.showDialog" width="30%" title="自动组卷">
      <el-form :model="questionPage.queryParam" ref="questionPageForm" :inline="true" :rules="rules">
          <el-form-item label="题库分类：" prop="gradeLevel">
            <treeselect
              no-options-text="无"
              v-model="questionPage.queryParam.gradeLevel"
              :options="categoryOptions"
              :show-count="true"
              placeholder="请选择题库分类"
              :multiple="true"
              valueConsistsOf="ALL"
            />
          </el-form-item>
          <el-form-item label="试卷类型：" prop="paperType" require>
            <el-select v-model="questionPage.queryParam.paperType" placeholder="试卷类型" clearable>
            <el-option
              v-for="dict in dict.type.exam_paper_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
            </el-select>
          </el-form-item>
          <el-form-item label="试卷名称：" prop="paperName" require>
            <el-input v-model="questionPage.queryParam.paperName" placeholder="试卷名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="建议时长：" prop="suggestTime" required>
            <el-input v-model="questionPage.queryParam.suggestTime" placeholder="分钟"/>
          </el-form-item>
          <el-form-item label="单选题数量(每题1分)：" prop="singleCnt">
            <el-input-number v-model="questionPage.queryParam.singleCnt" :min="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="多选题数量(每题2分)：" prop="multipleCnt">
            <el-input-number v-model="questionPage.queryParam.multipleCnt" :min="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="判断题数量(每题1分)：" prop="trueFalseCnt">
            <el-input-number v-model="questionPage.queryParam.trueFalseCnt" :min="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="简答题数量(每题5分)：" prop="shortAnswerCnt">
            <el-input-number v-model="questionPage.queryParam.shortAnswerCnt" :min="1" :max="20"></el-input-number>
          </el-form-item>
          <el-form-item label="合格分数：" prop="passScore">
            <el-input-number v-model="questionPage.queryParam.passScore"></el-input-number>
          </el-form-item>
      </el-form>
      <div><span>总分数：{{totalScore}}</span></div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="questionPage.showDialog = false">取 消</el-button>
          <el-button type="primary" @click="generatePaperAuto">确定</el-button>
     </span>
    </el-dialog>
  </div>


</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import { PaperPageList, PaperDeletePaper,generatePaper } from '@/api/examPaper'
import {categoryTreeSelect} from "@/api/questionbank/category";
import {knownLedgeLabelTreeSelect} from "@/api/questionbank/knowledgeLabel";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  components: { Pagination,Treeselect },
  dicts: ['exam_paper_type'],
  data() {
    return {
      queryParam: {
        id: null,
        level: null,
        subjectId: null,
        pageNum: 1,
        pageSize: 10
      },
      subjectFilter: null,
      listLoading: true,
      tableData: [],
      total: 0,
      categoryOptions: undefined,
      // 知识点标签选项
      labelOptions: undefined,
      questionPage: {
        showDialog: false,
        queryParam: {
          paperType:'1',
          paperName:null,
          gradeLevel:null,
          singleCnt:50,
          multipleCnt:10,
          trueFalseCnt:20,
          shortAnswerCnt:2,
          passScore:null,
          suggestTime:60

        },
        listLoading: true,
      },
      rules: {
        gradeLevel: [
          { required: true, message: '请选择题库', trigger: 'change' }
        ],
        paperName: [
          { required: true, message: '请输入试卷名称', trigger: 'blur' }
        ],
        paperType: [
          { required: true, message: '请选择试卷类型', trigger: 'blur' }
        ],
      },
    }
  },
  created() {
    this.search()
    // 题库
    this.getCategoryTree()
    // 知识点
    this.getKnownledgeLabelTree();

  },
  methods: {
    submitForm() {
      this.queryParam.pageNum = 1
      this.search()
    },
    resetQuery() {
      this.queryParam={
          id: null,
          name: null,
          paperType: null,
          pageNum: 1,
          pageSize: 10
      }
      this.search()
    },
    search() {
      this.listLoading = true
      PaperPageList(this.queryParam).then((data) => {
          this.tableData = data.rows;
          this.total = data.total;
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    },
    deletePaper(row) {
      let _this = this
      _this.$modal.confirm('是否确认删除"' + row.name+ '"的数据项？').then(function() {
        return PaperDeletePaper([row.id]);
      }).then(() => {
        _this.search();
        _this.$modal.msgSuccess("删除成功");
      }).catch(() => {
        _this.$modal.msg('已取消删除');
      });
    },
    levelChange() {
    },
    subjectFormatter(row, column, cellValue, index) {
    },

    // 自动组卷
    showDialog(){
      this.questionPage.showDialog = true
      this.questionPage.paperName = null
      this.questionPage.queryParam.gradeLevel = null
      this.questionPage.queryParam.singleCnt = 50
      this.questionPage.queryParam.multipleCnt = 10
      this.questionPage.queryParam.trueFalseCnt = 20
      this.questionPage.queryParam.shortAnswerCnt = 2
      this.questionPage.queryParam.passScore = null
      this.questionPage.queryParam.suggestTime=60
      this.questionPage.queryParam.paperType='1'
    },

    // 自动生成试卷
    generatePaperAuto() {
      let _this = this
      this.$refs.questionPageForm.validate((valid) => {
        if (valid) {
          this.questionPage.queryParam.gradeLevels = this.questionPage.queryParam.gradeLevel.join(',')
          this.formLoading = true
          generatePaper(this.questionPage.queryParam).then(re => {
            if (re.code === 200) {
              _this.$message.success(re.msg)
              this.questionPage.showDialog = false;
              // 查询数据
              this.resetQuery();
            } else {
              _this.$message.error(re.msg)
              this.formLoading = false
            }
          }).catch(e => {
            this.formLoading = false
          })
        } else {
          return false
        }
      })
    },

    /** 查询题库分类树结构 */
    getCategoryTree() {
      categoryTreeSelect().then((response) => {
        this.categoryOptions = response.data;
      });
    },
    /** 查询知识库标签树结构 */
    getKnownledgeLabelTree() {
      knownLedgeLabelTreeSelect().then(response => {
        this.labelOptions = response.data;
      });
    },
  },
  computed: {
    totalScore :function(){
     return this.questionPage.queryParam.singleCnt + this.questionPage.queryParam.multipleCnt * 2
      + this.questionPage.queryParam.trueFalseCnt  + this.questionPage.queryParam.shortAnswerCnt * 5;
    }
  }
}
</script>
